<template>
	<view class="detail-container">
		<!-- <van-skeleton title avatar
			 row="3" loading="{{ loading }}"> -->
		<view class="box fitst mgt0">
			<view class="title">
				{{listdata.name || ""}}
			</view>
			<view class="item"> <text>开始日期：</text>{{start_at || ""}}
			</view>
			<view class="item"> <text>截止日期：</text>{{end_at || ""}}
			</view>
			<view class="item" v-if="listdata.sign_time_status==1"> <text>签到时段：</text>{{signinbetweentime}}</view>
			<!-- 	<view class="item" v-if="listdata.token_status==1" @click="copytoken">
				<text>签到口令：</text>{{listdata.token || ""}}
			</view> -->
			<view class="item"> <text>签到序号：</text>{{listdata.code || ""}} </view>
			<view class="item" v-if="listdata.location_status==1"> <text>地址信息：</text>{{listdata.location_address || ""}}
			</view>
		</view>
		<view class="box second">
			{{listdata.content || ""}}

		</view>
		<!-- three -->
		<view class="box three">
			<view class="list" @click="signInCode">
				<view class="cover">
					<image src="/static/images/signIn/qrcode2.png" mode="widthFix"></image>

				</view>
				<text> 签到码</text>
			</view>
			<view class="list" @click="share">
				<view class="cover">
					<image src="/static/images/signIn/share.png" mode="widthFix"></image>
				</view>
				<text> 转发分享 </text>
			</view>
			<view class="list" @click="exportSignIn">
				<view class="cover">
					<image src="/static/images/signIn/excel.png" mode="widthFix"></image>
				</view><text> 导出签到</text>
			</view>
			<view class="list" @click="signInSetting">
				<view class="cover">
					<image src="/static/images/signIn/setting.png" mode="widthFix"></image>
				</view><text> 签到管理</text>
			</view>
		</view>


		<!-- fore -->
		<!-- 1 可签到  2 不可签到 3 已签到 -->
		<view class="button box" @click="userSignIn" v-if="signinYesOrNo == 1">
			签到
		</view>
		<view class=" button box button1" v-else-if="signinYesOrNo == 2 || signinYesOrNo == 3">
			<block v-if="signinYesOrNo == 3">已签到</block>
			<block v-else>未在签到时间内</block>
		</view>
		<view class="button btnred box" @click="deleteSignIn">
			删除
		</view>

		<!-- 转发分享页面 -->
		<view class="bigbox " :class="{ 'heightshow' : isshare }">
			<view class="title">
				选择分享方式
			</view>
			<view class="content ">
				<view class="items flex">

					<button class="item " open-type="share">
						<view class="cover">
							<image src="/static/images/signIn/weChart.png" style="margin-top: 17rpx;" mode="widthFix">
							</image>
						</view>
						微信好友
						<!-- 微信好友 -->
					</button>
					<view class="item" @click="signInCode">
						<view class="cover">
							<image src="/static/images/signIn/qrcode2.png" mode="widthFix"></image>
						</view>
						签到二维码
					</view>
				</view>
			</view>
			<view class="cancel" @click="isshare=false">
				取消
			</view>
		</view>


		<!-- 签到管理页面 -->
		<view class="bigbox" :class="{ 'heightshow' : issignInsetting }">
			<view class="title">
				选择分享方式
			</view>
			<view class="content content-setting">
				<view class="items flex">
					<view class="item mgt-20" @click="editSetting">
						<view class="cover">
							<image src="/static/images/signIn/editSetting.png" mode="widthFix"></image>
						</view>
						修改设置
					</view>
					<view class="item mgt-20" @click="goAdministrator" v-if="navselect==1">
						<view class="cover">
							<image src="/static/images/signIn/administrators.png" mode="widthFix"></image>
						</view>
						设置管理员
					</view>
					<view class="item mgt-20" @click="copySetting" v-if="navselect==1">
						<view class="cover">
							<image src="/static/images/signIn/copy.png" mode="widthFix"></image>
						</view>
						复制签到
					</view>
					<view class="item mgt-20" @click="signInpeople">
						<view class="cover">
							<image src="/static/images/signIn/offical-pep.png" mode="widthFix"></image>
						</view>
						签到名单
					</view>
					<view class="item mgt-20" @click="dialogToggle" v-if="navselect==1">
						<view class="cover">
							<image src="/static/images/signIn/offical-number.png" mode="widthFix"></image>
						</view>
						公众号接入
					</view>
				</view>
			</view>
			<view class="cancel" @click="issignInsetting=false">
				取消
			</view>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="查看教程" confirmText="复制路径" title="小程序路径" :content="path"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="mask" @click="isshare=false;issignInsetting=false" v-if="isshare ||issignInsetting "> </view>
		<!-- <view class="mask" > </view> -->
		<!-- </van-skeleton> -->
	</view>


</template>

<script>
	import {
		signInfo,
		signDel,
		signList
	} from '@/api/activity.js';

	export default ({

		data() {
			return {
				start_at: "",
				end_at: "",
				isshare: false, //  是否点击了转发分享
				issignInsetting: false,
				listdata: [],
				code: "",
				itemdata: {},
				navselect: "1",
				signinYesOrNo: -1,
				path: "",
				list: [],
				isHaveName: false,
				signinbetweentime: ""
				// loading:false
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			// 如果之前打开了签到口令
			// 如果之前没有打开签到口令
			// if (this.listdata.token_status == 1 && this.listdata.token != "") {
		
			// 如果  打开了签到口令  并且  我现在 签到口令不等于空
			if (this.listdata.token_status == 1 && this.listdata.token != "") {
				return {
					title: this.listdata.name,
					path: '/pages/signIn/password?password=' + this.listdata.token + "&code=" + this.code,
					imageUrl: "/static/images/signIn/sharesignInimg.png",
					navselect: "",
				}
			} else {
				return {
					title: this.listdata.name,
					path: '/pages/signIn/user-signIn?code=' + this.code,
					imageUrl: "/static/images/signIn/sharesignInimg.png",
					navselect: "",
				}
			}


		},
		onLoad(options) {
			this.code = options.code
			this.navselect = options.navselect
			console.log(this.code, this.navselect);

			// this.itemdata=options.item
			// console.log( this.itemdata,'this.itemdata');

		},

		onShow() {
			this.issignInsetting = false
			this.init()
		},
		methods: {
			init() {

				// this.signinbetweentime=this.list.sign_time
				uni.showLoading({
					title: "正在加载···"
				})
				console.log(this.code);
				this.signinbetweentime = ""
				signInfo({
					data: {
						code: this.code
					}
				}).then(res => {
					if (res.code == 1) {
						// 1 可签到  2 不可签到 3 已签到
						this.signinYesOrNo = res.data.info.can_sign;
						this.listdata = res.data.info
						this.list = res.data
						this.start_at = this.listdata.start_at.substr(0, this.listdata.start_at.length - 3)
						this.end_at = this.listdata.end_at.substr(0, this.listdata.end_at.length - 3)
						console.log(this.listdata, "this.listdata");
						console.log(this.list, 'list 最大的数组');
						for (let ttt in this.list.sign_time) {
							console.log(this.list.sign_time[ttt][0].substr(0, 5), 'list.sign_time[ttt]');
							console.log(this.list.sign_time[ttt][1].substr(0, 5), 'list.sign_time[ttt]');
							this.signinbetweentime = this.signinbetweentime + this.list.sign_time[ttt][0]
								.substr(0, 5) + '-' + this.list.sign_time[ttt][1].substr(0, 5) + '、'
						}
						this.signinbetweentime = this.signinbetweentime.substr(0, this.signinbetweentime
							.length - 1)
						uni.hideLoading()
					}
				})
				uni.showLoading({
					title: "正在加载···"
				})

			},
			signInpeople() {
				console.log(this.list, '11111111111111111111111111111');
				let _list = this.list.from_data
				for (let t in _list) {
					console.log(_list[t].title);
					if (_list[t].title == '姓名') {
						this.isHaveName = true
					} else {}
					uni.navigateTo({
						url: "signIn-popole?code=" + this.code + '&isHaveName=' + this.isHaveName
					})
				}


			},
			dialogToggle() {
				this.issignInsetting = false
				this.msgType = "success"
				this.path = "pages/signIn/user-signIn?code=" + this.code + "\r\n\r\n" + '注意：以上小程序路径用于配置公众号中打开小程序签到页面'
				this.$refs.alertDialog.open()

			},
			dialogConfirm() {
				uni.setClipboardData({
					data: "pages/signIn/user-signIn?code=" + this.code,
					success: function() {
						console.log('success');
					}
				});
			},
			dialogClose() {
				uni.navigateTo({
					url: "../me/official-account"
				})
			},
			copytoken() {
				uni.setClipboardData({
					data: this.listdata.token,
					success: function() {
						console.log('success');
					}
				});
			},
			deleteSignIn() {

				console.log(this.code);
				uni.showModal({
					title: '提示',
					content: '您确定删除这个吗?',
					success: res => {
						if (res.confirm) {
							signDel({
								data: {
									code: this.code
								}
							}).then(res => {})
							uni.switchTab({
								url: '/pages/signIn/signIn'
							});;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			userSignIn() {
				if (this.navselect == 3) {
					uni.navigateTo({
						url: "user-signIn?code=" + this.code + "&navselect=" + this.navselect
					})
				} else {
					// if (this.listdata.token_status == 0) {
					// 	uni.navigateTo({
					// 		url: "user-signIn?code=" + this.code
					// 	})
					// } else 

					// 如果  打开了签到口令  并且  我现在 签到口令不等于空  
					if (this.listdata.token_status == 1 && this.listdata.token != "") {
						uni.navigateTo({
							url: "password?password=" + this.listdata.token + "&code=" + this.code
						})
					} else {
						uni.navigateTo({
							url: "user-signIn?code=" + this.code
						})
					}
				}
			},

			signInsetting() {
				this.issignInsetting = true
			},
			goAdministrator() {
				uni.navigateTo({
					url: "administrator?code=" + this.code
				})
			},
			copySetting() {
				uni.navigateTo({
					url: "../index/add-signIn?code=" + this.code + '&type=copy'
				})
			},
			editSetting() {
				uni.navigateTo({
					url: "../index/add-signIn?code=" + this.code + '&type=copy&edit=true'
				})
			},
			signInCode() {
				uni.navigateTo({
					url: "signIn-qrcode?name=" + this.listdata.name + '&code=' + this.listdata.code
				})
			},

			share() {
				this.isshare = !this.isshare
			},
			exportSignIn() {
				uni.navigateTo({
					url: "export-signIn?code=" + this.code
				})
			},
			signInSetting() {
				this.issignInsetting = true
			},
		}

	})
</script>

<style lang="scss" scoped>
	.detail-container {
		background-color: #f6f6f6;
		padding: 0 20upx;
		min-height: 100vh;
		border: 1px solid rgba($color: #000000, $alpha: 0);

		.box {
			border-radius: 8upx;
			padding: 25upx;
			box-shadow: 0 0 6upx #cccccc;
			background-color: #fff;
			margin-top: 20upx;
		}

		.fitst {
			.title {
				margin-bottom: 10upx;
			}

			.item {
				font-size: 26upx;
				color: #999;
				line-height: 45upx;
			}
		}

		.second {
			color: #8F939C;
			font-size: 26upx;
		}

		.three {
			display: flex;
			justify-content: space-around;
			// align-items: center;

			.list {
				width: 200upx;
				font-size: 28upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;

				.cover {
					width: 60upx;
					height: 60upx;

					image {
						width: 100%;
						height: 100%;
					}

				}

				text {
					display: block;
					width: 150upx;
				}
			}

		}

		.button {
			color: #fff;
			font-size: 34upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1e90ff;
		}

		.button1 {
			background-color: #c7c7c7;
		}

		.btnred {
			background-color: #ff0000;
		}

	}


	.heightshow {
		bottom: 0 !important;
	}

	.bigbox {
		z-index: 666;
		position: fixed;
		width: 100%;
		// height: 350upx;
		background-color: #fff;
		left: 0;
		bottom: -50vh;
		box-shadow: 0 0 8upx #eee;
		border-radius: 20upx 20upx 0 0;
		padding-top: 30upx;
		transition: all 0.3s;

		.title {
			padding: 0 30upx;
			font-size: 28upx;
			height: 65upx;
			line-height: 1;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			border-bottom: 1px solid #0c0c0c;
		}

		// .content-setting{
		// 	height: 600upx;
		// }
		.content {
			padding: 0 30upx;
			margin-top: 10px;
			font-size: 28upx;

			.items {
				display: flex;
				flex-wrap: wrap;

				.item {
					margin-top: 30upx;
					width: 170upx;
					font-size: 22upx;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
					background: none;


					&::after {
						border: none;
					}

					.cover {
						width: 60upx;
						height: 60upx;
						z-index: 2;


						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.cancel {
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 34upx;
			background-color: #eae7e8;
			margin-top: 40upx;
		}

	}
</style>
